<template>
  <div class="approval-step">
    <a-form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="审批类型" required>
        <a-select v-model:value="formData.approvalType">
          <a-select-option value="normal">常规审批</a-select-option>
          <a-select-option value="urgent">加急审批</a-select-option>
          <a-select-option value="special">特殊审批</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="审批意见" required>
        <a-textarea v-model:value="formData.comment" placeholder="请输入审批意见" :rows="4" />
      </a-form-item>

      <a-form-item label="附件">
        <a-upload v-model:file-list="formData.attachments" :before-upload="beforeUpload" multiple>
          <a-button> <upload-outlined /> 上传文件 </a-button>
        </a-upload>
      </a-form-item>

      <a-form-item label="抄送人员">
        <a-select
          v-model:value="formData.ccUsers"
          mode="multiple"
          placeholder="请选择抄送人员"
          :options="userOptions"
          :filter-option="filterUserOption"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 6 }">
        <a-button type="primary" @click="handleSave">保存草稿</a-button>
        <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
      </a-form-item>
    </a-form>

    <div v-if="approvalHistory.length" class="approval-history">
      <h4>审批记录</h4>
      <a-timeline>
        <a-timeline-item v-for="item in approvalHistory" :key="item.id">
          <p>{{ item.operator }} {{ item.action }} - {{ formatTime(item.time) }}</p>
          <p v-if="item.comment" class="comment">{{ item.comment }}</p>
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { UploadOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

const props = defineProps({
  stepData: Object,
});

const emit = defineEmits(["update"]);

const formData = ref({
  approvalType: "normal",
  comment: "",
  attachments: [],
  ccUsers: [],
});

const userOptions = ref([
  { value: "user1", label: "张三" },
  { value: "user2", label: "李四" },
  { value: "user3", label: "王五" },
]);

const approvalHistory = ref([
  { id: 1, operator: "李四", action: "提交审批", time: new Date("2023-05-10 09:30:00"), comment: "请尽快审批" },
  { id: 2, operator: "王经理", action: "初审通过", time: new Date("2023-05-11 10:15:00"), comment: "符合基本要求" },
]);

// 初始化表单数据
onMounted(() => {
  if (props.stepData.formData) {
    formData.value = { ...props.stepData.formData };
  }
});

const formatTime = (date) => {
  // return format(date, "yyyy-MM-dd HH:mm");
};

const beforeUpload = (file) => {
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error("文件大小不能超过10MB");
    return false;
  }
  return true;
};

const filterUserOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const handleSave = () => {
  emit("update", { formData: formData.value });
  message.success("审批信息已保存");
};

const handleReset = () => {
  formData.value = {
    approvalType: "normal",
    comment: "",
    attachments: [],
    ccUsers: [],
  };
};
</script>

<style scoped>
.approval-step {
  padding: 10px;
}

.approval-history {
  margin-top: 30px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.comment {
  color: #666;
  font-size: 0.9em;
  margin-top: 5px;
}
</style>
